<template>
  <view class="page container">
    <image class="bg-img" src="/static/my/bg-top.png"></image>
    <u-navbar title="我的" bgColor="transparent" titleStyle="color:#fff">
      <view slot="left"></view>
    </u-navbar>
    <view class="h-168 pl-32 pr-32 flex-between-center mt-32" style="margin-top: -195rpx">
      <view class="flex-column-center c-fff" @click="onLogin">
        <u-avatar size="148rpx" :src="userInfo.avatar"></u-avatar>
        <view class="h-108 flex-column flex-row-center ml-20">
          <text class="fs-36 fw-600">{{ userInfo.id ? (userInfo.nickname || '未设置昵称') : '点击登录' }}</text>
          <text class="fs-28" v-if="JSON.stringify(userInfo) !== '{}'">{{ userInfo.mobile || '未设置手机号'
          }}</text>
          <view class="tags mt-12 flex-column-center">
            <image v-if="userInfo.yan_shop.id && userInfo.yan_shop.status == 1" mode="heightFix" class="h-40 mr-12"
              src="/static/my/huiyaundanwei-tag.png">
            </image>
            <image v-if="userInfo.jiu_shop.id && userInfo.jiu_shop.status == 1 && userInfo.jiu_shop.type == 1"
              mode="heightFix" class="h-40 mr-12" src="/static/my/jiuchang-tag.png">
            </image>
            <image v-if="userInfo.jiu_shop.id && userInfo.jiu_shop.status == 1 && userInfo.jiu_shop.type == 0"
              mode="heightFix" class="h-40 mr-12" src="/static/my/jiushang-tag.png">
            </image>
            <image v-if="userInfo.xh_manage.id" mode="heightFix" class="h-40" src="/static/my/xiehui-tag.png">
            </image>
          </view>
        </view>
      </view>
      <view class="w-140 h-64 br-32 bgc-fff flex-center-center fs-24 fw-500" v-if="userInfo.id"
        @click="$utils.to('/pages2/my/update_profile')">编辑资料</view>
    </view>
    <view class="pt-40">
      <u-cell-group :border="false" v-if="userInfo">
        <u-cell v-if="userInfo.yan_shop.id && userInfo.yan_shop.status == 1" :border="false" title="签到赢好礼" isLink
          @click="$utils.to('/pages2/my/sign_in')">
          <image class="w-44 h-44" slot="icon" src="/static/my/qiandao.svg"></image>
        </u-cell>
		<u-cell :border="false" title="我的订单" isLink
		  @click="$utils.to('/pages/scoreOrder/index')">
		  <image class="w-44 h-44" slot="icon" mode="aspectFit" src="/static/order.png"></image>
		</u-cell>
        <u-cell :border="false" title="我的收藏" isLink @click="$utils.to('/pages2/my/my_collect')">
          <image class="w-44 h-44" slot="icon" src="/static/my/star.svg"></image>
        </u-cell>
        <u-cell v-if="userInfo.xh_manage.id" :border="false" title="我负责的烟酒门店" isLink
          @click="$utils.to('/pages2/my/charge_store')">
          <image class="w-44 h-44" slot="icon" src="/static/my/wofuzede.svg"></image>
        </u-cell>
        <u-cell :border="false" title="烟酒会员单位" isLink @click="go_apply_enter_member"
          :value="(userInfo.yan_shop.id && userInfo.yan_shop.status == 1) ? '已入驻' : ''">
          <image class="w-44 h-44" slot="icon" src="/static/my/yjdwhy.svg"></image>
        </u-cell>
        <u-cell :border="false" title="申请酒厂入驻" isLink @click="go_apply_enter_factory"
          :value="(userInfo.jiu_shop.id && userInfo.jiu_shop.status == 1) ? '已入驻' : ''">
          <image class="w-44 h-44" slot="icon" src="/static/my/sqjcrz.svg"></image>
        </u-cell>
        <u-cell :border="false" title="关于我们" isLink @click="$utils.to('/pages2/my/about_us')">
          <image class="w-44 h-44" slot="icon" src="/static/my/guanyu.svg"></image>
        </u-cell>
        <u-cell :border="false" title="联系我们" isLink @click="openActionSheet">
          <image class="w-44 h-44" slot="icon" src="/static/my/lxwm.svg"></image>
        </u-cell>
      </u-cell-group>
    </view>
    <u-action-sheet cancelText="取消" :actions="actionList" :show="actionShow" @close="closeActionSheet"
      @select="selectAction"></u-action-sheet>
  </view>
</template>
<script>
import { getAuthorization } from "@/utils/auth";
import { mapState, mapActions } from "vuex";
import { configApi } from "@/services/common";
export default {
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      actionList: [
        {
          name: "联系客服",
          color: "#1C1714",
          fontSize: "34rpx",
        },
        {
          name: "",
          color: "#1C1714",
          fontSize: "34rpx",
        },
        {
          name: "拨号",
          color: "#1C1714",
          fontSize: "34rpx",
        },
      ],
      actionShow: false,
    };
  },
  onShow() {
    if (getAuthorization()) {
      this.getUserInfo()
    }
  },
  onLoad() {
    this.getConfig()
  },
  methods: {
    ...mapActions({
      getUserInfo: "user/getUserInfo",
    }),
    selectAction(item) {
      if (item.name === '拨号') {
        this.$utils.onCall(this.actionList[1].name);
      }
    },
    getConfig() {
      configApi().then(res => {
        console.log(res);
        const { kf_phone } = res.data
        this.$set(this.actionList, 1, {
          name: kf_phone,
          color: "#1C1714",
          fontSize: "34rpx",
        })
      })
    },
    onLogin() {
      if (!this.userInfo.id) {
        uni.navigateTo({
          url: '/pages/login/login',
        });
      }
    },
    openActionSheet() {
      uni.hideTabBar();
      this.$nextTick(() => {
        this.actionShow = true;
      });
    },
    closeActionSheet() {
      this.actionShow = false;
      this.$nextTick(() => {
        uni.showTabBar();
      });
    },
    go_apply_enter_member() {
      const { yan_shop } = this.userInfo
      if (yan_shop.id) {
        this.$utils.to('/pages2/my/apply_enter_member_detail')
      } else {
        this.$utils.to('/pages2/my/apply_enter_member')
      }
    },
    go_apply_enter_factory() {
      const { jiu_shop } = this.userInfo
      if (jiu_shop.id) {
        this.$utils.to('/pages2/my/apply_enter_factory_detail')
      } else {
        this.$utils.to('/pages2/my/apply_enter_factory')
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  .bg-img {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 400rpx;
    z-index: -1;
  }

  /deep/.u-cell__body {
    padding-top: 25rpx;
    padding-bottom: 25rpx;
  }

  /deep/.u-cell__title-text {
    font-size: 32rpx;
  }
}
</style>